<template>
	<view class="container">
		<view class="reward-section">
			<view class="section-title">平台商城奖励</view>
			<view class="icon-list">
				<view class="icon-item" @click="$navTo(item.path)" v-for="(item, index) in platformRewards" :key="index">
					<image :src="item.icon" mode="aspectFit" class="icon-image"></image>
					<text class="icon-text">{{ item.name }}</text>
				</view>
			</view>
		</view>

		<view class="reward-section">
			<view class="section-title">生活服务奖励</view>
			<view class="icon-list">
				<view class="icon-item"  @click="$navTo(item.path)" v-for="(item, index) in lifeServiceRewards" :key="index">
					<image :src="item.icon" mode="aspectFit" class="icon-image"></image>
					<text class="icon-text">{{ item.name }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import img from '@/utils/imgs.js'
	export default {
		data() {
			return {
				platformRewards: [
			
				
					{
						name: '天猫超市',
						icon: img.logos.tm,
						path:'pageA/my-reward/tm-reward'
					},
					{
						name: '唯品会',
						icon: img.logos.wph,
						path:'pageA/my-reward/wph-reward'
					},
					{
						name: '淘宝',
						icon: img.logos.tb,
						path:'pageA/my-reward/taobao-reward'
					},
					{
						name: '拼多多',
						icon: img.logos.pdd,
						path:'pageA/my-reward/pdd-reward'
					},
					{
						name: '京东',
						icon: img.logos.jd,
						path:'pageA/my-reward/jd-reward'
					},
				],
				lifeServiceRewards: [
					{
						name: '美团',
						icon: img.logos.mtwm,
						path:'pageA/my-reward/mt-reward'
					}
				]
			}
		},
		methods: {
			goBack() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
.container {
  padding: 30rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 40rpx;
  
  .back-icon {
    margin-right: 20rpx;
  }
  
  .title {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
  }
}

.reward-section {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 30rpx;
    position: relative;
    padding-left: 20rpx;
    
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 6rpx;
      height: 30rpx;
      background-color: #ff8c19;
      border-radius: 3rpx;
    }
  }
  
  .icon-list {
    display: flex;
    flex-wrap: wrap;
    
    .icon-item {
      width: 20%;
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 30rpx;
      
      .icon-image {
        width: 90rpx;
        height: 90rpx;
        margin-bottom: 15rpx;
        border-radius: 50%;
        box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
      }
      
      .icon-text {
        font-size: 24rpx;
        color: #666;
      }
    }
  }
}
</style>